<template>
	<view class="navigation">
		<view class="button-group" @click="active('home')">
			<image :src="activeModel == 'home' ? '../../static/icon/home-active.svg' : '../../static/icon/home.svg'"></image>
			<view :class="activeModel == 'home' ? 'text-active' : ''">首页</view>
		</view>
		<view class="button-group" @click="active('message')">
			<image :src="activeModel == 'message' ? '../../static/icon/message-active.svg' : '../../static/icon/message.svg'"></image>
			<view :class="activeModel == 'message' ? 'text-active' : ''">消息</view>
		</view>
		<view class="button-group" @click="active('order')">
			<image :src="activeModel == 'order' ? '../../static/icon/order-active.svg' : '../../static/icon/order.svg'"></image>
			<view :class="activeModel == 'order' ? 'text-active' : ''">订单</view>
		</view>
		<view class="button-group" @click="active('myself')">
			<image :src="activeModel == 'myself' ? '../../static/icon/myself-active.svg' : '../../static/icon/myself.svg'"></image>
			<view :class="activeModel == 'myself' ? 'text-active' : ''">我的</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		},
		data() {
			return {
				activeModel: 'home',
			}
		},
		mounted() {
		},
		methods: {
			active(model) {
				this.activeModel = model
				this.$emit('activeModel', this.activeModel)
			}
		}
	}
</script>

<style scoped lang="scss">
	.navigation {
		position: absolute;
		bottom: 0;
		height: 120rpx;
		background-color: #efefef;
		/* width: 100%; */
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;
		padding-top: 10rpx;
		width: 750rpx;
		
		.button-group {
			width: 25%;
			text-align: center;
			
			image {
				width: 60rpx;
				height: 60rpx;
			}
			
			.text-active {
				color: #36ab60;
			}
		}
		
	}
</style>